<template>
	<view class="page_content fullscreen-safe-area">
		<view class="common_card common_card_flex">
			<view class="row_flex">
				<image :src="detail.runStatus == '1' ? '/static/project/component_online.png' : '/static/project/component_offline.png' " mode="aspectFit" style="width: 40rpx;height: 40rpx;"></image>
				<view class="row_col">
					<view class="common-bold-title">{{detail.componentGoodsName}}</view>
					<view class="location">{{detail.runStatus == '1' ? '当前设备运行中' : '当前设备离线'}}</view>
				</view>
			</view>
			<view class="headButton_content">
				<view class="headButton_item" v-for="(item,index) in headButtonList" :key="index">
					<view class="headButton_item_name">{{item.name}}</view>
					<view class="headButton_item_value">{{item.value}}</view>
				</view>
			</view>
		</view>
		
		<view class="common_card" style="margin-top: 40rpx;">
			<view class="log_card_head">
				<view class="log_card_head_title">操作日志</view>
				<view class="log_card_head_button" v-if="hasLog" @click.stop="seeAll">查看全部</view>
			</view>
			<template v-if="hasLog">
				<view class="log_card_list" v-for="(item,index) in detail.operationLogList" :key="index">
					<image :class="detail.componentType == 2 ? 'image_wendy' : 'image_elec'" :src="imageUrl(item)" mode="aspectFit"></image>
					<view class="log_card_list_info">
						<view class="log_card_list_info_name">{{item.operateContent}}</view>
						<view class="log_card_list_info_value">{{formatInfo(item)}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="nodata">
					<view class="img"></view>
					<view class="text">暂无数据</view>
				</view>
			</template>
			
		</view>
		
		<template v-if="detail.componentType == 2 ? true : false">
			<view class="temp_card_content" style="margin-top: 40rpx;">
				<view class="temp_card_item">
					<view class="temp_card_item_title">温度设置 (℃)</view>
					<view class="temp_card_item_value">
						<input class="input_cls" type="text" v-model="temperature" placeholder="请输入温度值" placeholder-style="color:#9CA3AF" cursor-color="#4B5563"/>
						<image src="/static/project/component_temperature.png" mode="aspectFit" style="width: 14px;height: 14px;"></image>
					</view>
				</view>
				<view class="temp_card_item">
					<view class="temp_card_item_title">湿度设置 (%)</view>
					<view class="temp_card_item_value">
						<input class="input_cls" type="text" v-model="humidity" placeholder="请输入湿度值" placeholder-style="color:#9CA3AF" cursor-color="#4B5563"/>
						<image src="/static/project/component_ humidity.png" mode="aspectFit" style="width: 11px;height: 14px;"></image>
					</view>
				</view>
			</view>
			
			<view class="save" @click.stop="saveSettting">
				<image src="/static/project/component_save_icon.png" mode="aspectFit" style="width: 28rpx;height: 32rpx;"></image>
				<view>保存设置</view>
			</view>
			
		</template>
		<template v-else>
			<view class="common_card" style="row-gap: 48rpx; margin-top: 40rpx;">
				<view class="save_btns_title">操作控制</view>
				<view class="btns">
					<view class="save_btn save_btn_normal_color" @click.stop="openSwitch">
						<image src="/static/project/component_open_icon.png" mode="aspectFit" style="width: 28rpx;height: 32rpx;"></image>
						<view>分闸</view>
					</view>
					<view class="save_btn save_btn_selected_color" @click.stop="closeSwitch">
						<image src="/static/project/component_open_icon.png" mode="aspectFit" style="width: 28rpx;height: 32rpx;"></image>
						<view>合闸</view>
					</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{
					componentGoodsId: null,
					componentGoodsName: "",
					componentType: 1,
					runStatus: 1,
					runTime: "0",
					temperature: '',
					voltage: "",
					electric: "",
					humidity: '',
					operationLogList: []
				},
				temperature:'',
				humidity:''
			}
		},
		computed:{
			headButtonList(){
				//1-断路器；2-温度控制器）
				var ret = []
				if(this.detail.componentType == 2) {
					ret.push({
						name:'运行时长',
						value:(this.detail.runTime || '--'),
					})
					ret.push({
						name:'设备温度',
						value:(this.detail.temperature || '--'),
					})
					ret.push({
						name:'设备湿度',
						value:(this.detail.humidity || '--'),
					})
				} else {
					ret.push({
						name:'运行时长',
						value:(this.detail.runTime || '--'),
					})
					ret.push({
						name:'设备电压',
						value:(this.detail.voltage || '--'),
					})
					ret.push({
						name:'设备电流',
						value:(this.detail.electric || '--'),
					})
				}
				return ret;
			},
			hasLog(){
				if(this.detail.operationLogList) {
					return this.detail.operationLogList.length > 0 ? true : false
				} else {
					return false;
				}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			formatInfo(item){
				return '操作人:' + item.userName + ' | ' + item.opTime;
			},
			imageUrl(item){
				if(item.componentType == 2) {
					return (item.operateType == 3) ? '/static/project/component_control_temp_icon' : '/static/project/component_control_wendy_icon.png';
				} else {
					return (item.operateResult == 2) ? '/static/project/component_control_fail.png' : '/static/project/component_control_success.png';
				}
			},
			loadData(){
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.getMethod('/loyu-api/app/component/monitor',{
					componentGoodsId:self.$Route.query.id
				}).then(ok => {
					self.$progressHud.hideLoading();
					self.detail = ok.data;
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			seeAll(){
				this.$Router.push({
					path:'/modules/projects/pages/controlLog/controlLog',
					query:{
						id:this.detail.componentGoodsId
					}
				})
			},
			openSwitch(){
				//分闸
				let self = this;
				this.$progressHud.showModal({
					title:'',
					text:'确定要进行分闸操作吗？',
					success:(res)=>{
						if(res.confirm) {
							self.$progressHud.showLoading();
							self.$NetApi.postMethod('/loyu-api/app/component/open',{
								componentGoodsId:self.detail.componentGoodsId
							}).then(ok => {
								self.$progressHud.hideLoading();
								self.$progressHud.showToast("分闸成功");
								setTimeout(() =>{
									self.loadData()
								}, 2000);
							}, fail => {
								self.$progressHud.hideLoading();
								self.$progressHud.showToast(fail.errMsg || '网络错误');
							})
						}
					}
				});
			},
			closeSwitch(){
				//合闸
				let self = this;
				this.$progressHud.showModal({
					title:'',
					text:'确定要进行合闸操作吗？',
					success:(res)=>{
						if(res.confirm) {
							self.$progressHud.showLoading();
							self.$NetApi.postMethod('/loyu-api/app/component/close',{
								componentGoodsId:self.detail.componentGoodsId
							}).then(ok => {
								self.$progressHud.hideLoading();
								self.$progressHud.showToast("合闸成功");
								setTimeout(() =>{
									self.loadData()
								}, 2000);
							}, fail => {
								self.$progressHud.hideLoading();
								self.$progressHud.showToast(fail.errMsg || '网络错误');
							})
						}
					}
				});
			},
			saveSettting(){
				if(this.temperature.length == 0) {
					this.$progressHud.showToast('请输入温度')
					return;
				}
				if(this.humidity.length == 0) {
					this.$progressHud.showToast('请输入湿度')
					return;
				}
				
				let self = this;
				self.$progressHud.showLoading();
				self.$NetApi.postMethod('/loyu-api/app/component/temp-humidity-set',{
					componentGoodsId:this.detail.componentGoodsId,
					humidity: parseFloat(this.humidity),
					temperature:parseFloat(this.temperature)
				}).then(ok => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast("保存成功");
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page_content {
		width: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background-color: $power-bkg-color;
	}
	.common_card{
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
		padding: 40rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		width: calc(100% - 80rpx);
		overflow: clip;
		
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
	}
	.common_card_flex{
		margin-top: 32rpx;
		row-gap: 32rpx;
	}
	.row_flex{
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 24rpx;
	}
	.row_col{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 8rpx;
	}
	.common-bold-title{
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 48rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.location{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.headButton_content{
		width: 100%;
		
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		column-gap: 32rpx;
	}
	.headButton_item{
		flex: 1;
		height: 40px;
		background-color: #F9FAFB;
		height: 136rpx;
		padding: 24rpx;
		border-radius: 24rpx;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		row-gap: 8rpx;
	}
	.headButton_item_name{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.headButton_item_value{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.log_card_head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.log_card_head_title{
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 48rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.log_card_head_button{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: center;
		letter-spacing: normal;
		color: $power-color-primary;
	}
	.log_card_list{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 32rpx;
		column-gap: 24rpx;
	}
	.log_card_list_info{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 8rpx;
	}
	
	.log_card_list_info_name{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.log_card_list_info_value{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.temp_card_content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		column-gap: 32rpx;
		flex-shrink: 0;
		
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
		padding: 40rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		width: calc(100% - 80rpx);
		overflow: clip;
	}
	.temp_card_item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 16rpx;
		flex: 1;
	}
	.temp_card_item_title{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;
	}
	.temp_card_item_value{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 26rpx;
		
		border-radius: 8rpx;
		box-sizing: border-box;
		border: 2rpx solid #E5E7EB;
		padding: 0px 32rpx;
		gap: 0px 10px;
	}
	.input_cls{
		// height: 96rpx;
		padding: 24rpx 0px;
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;
	}
	.save_btn{
		flex: 1;
		border-radius: 8rpx;
		
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 100rpx;;
		text-align: center;
		letter-spacing: normal;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 16rpx;
	}
	.btns{
		display: flex;
		flex-direction: row;
		column-gap: 32rpx;
	}
	.save_btns_title{
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 48rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.save_btn_normal_color{
		background: $power-color-error;
		color: #FFF;
	}
	.save_btn_selected_color{
		border-width: 0px;;
		background: $power-color-primary;
		color: #FFF;
	}
	.save{
		width: calc(100% - 64rpx);
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 60rpx;
		background: $power-color-primary;
		color: #FFF;
		border-radius: 8rpx;
		
		font-family: Roboto;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 100rpx;;
		text-align: center;
		letter-spacing: normal;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 16rpx;
	}
	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: transparent;
	}
	.nodata .img {
		width: 50vw;
		height: 41vw;
		margin-bottom: 10rpx;
		background: url(/static/mine/no_data.png) no-repeat center center;
		background-size: 100% auto;
	}
	.nodata .text {
		font-size: 30rpx;
		color: #999;
	}
	.image_wendy{
		width: 40rpx;
		height: 40rpx;
		margin-top: 8rpx;
	}
	.image_elec{
		width: 28rpx;
		height: 28rpx;
		margin-top: 8rpx;
	}
</style>
